<template>
  <div class="trend">
    <div class="text" :style="{ color: textColor }">
      <slot v-if="slots.default"></slot>
      <div v-else>{{ text }}</div>
    </div>
    <div class="icon">
      <component
        :is="`el-icon-${toLine(upIcon)}`"
        :style="{ color: !reverseColor ? upIconColor : downIconColor }"
        v-if="type === 'up'"
      ></component>
      <component
        :is="`el-icon-${toLine(downIcon)}`"
        :style="{ color: !reverseColor ? downIconColor : upIconColor }"
        v-else
      ></component>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { computed, onMounted, useSlots } from 'vue'
  import { toLine } from '../../../utils/index'
  let props = defineProps({
    // 标记当前趋势，上升 up 下降 down
    type: {
      type: String,
      default: 'up'
    },
    upIcon: {
      type: String,
      default: 'ArrowUp'
    },
    downIcon: {
      type: String,
      default: 'ArrowDown'
    },
    // 趋势显示文字
    text: {
      type: String,
      default: '文字'
    },
    // 颜色反转
    reverseColor: {
      type: Boolean,
      default: false
    },
    upIconColor: {
      type: String,
      default: '#f5222d'
    },
    downIconColor: {
      type: String,
      default: '#52c41a'
    },
    upTextColor: {
      type: String,
      default: 'rgb(0,0,0)'
    },
    downTextColor: {
      type: String,
      default: 'rgb(0,0,0)'
    }
  })
  // 获取插槽内容
  let slots = useSlots()
  // 文字颜色
  let textColor = computed(() => {
    return props.type === 'up' ? props.upTextColor : props.downTextColor
  })
</script>
<style lang="scss" scoped>
  .trend {
    display: flex;
    align-items: center;
  }
  .text {
    font-size: 12px;
    margin-right: 4px;
  }
  .icon {
    svg {
      width: 0.8em;
      height: 0.8em;
    }
  }
</style>
